<template>
  <div>
    <el-dialog :title="title"
               :visible.sync="visible"
               v-loading="loading"
               :before-close="modalClose"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="80%"
               append-to-body>
      <el-form :model="shopModel"
               ref="shopRefs"
               :rules="shopRules"
               label-width="100px">
        <el-form-item label="商品分类："
                      prop="sellDrugDto.drugType">
          <el-select v-model="shopModel.sellDrugDto.drugType"
                     placeholder="请选择商品分类"
                     @change="changeType">
            <el-option v-for="item in shopTypeList"
                       :key="item.drugType"
                       :label="item.drugName"
                       :value="item.drugType">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称："
                      prop="drugId">
          <el-select v-model="shopModel.sellDrugDto.drugId"
                     placeholder="请选择商品名称"
                     filterable
                     remote
                     reserve-keyword
                     clearable
                     :remote-method="remoteMethod"
                     :loading="loading2"
                     class="w-200"
                     @change="handleSelect">
            <el-option v-for="item in dataFilterList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品图片："
                      prop="sellDrugDto.logoUrl">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                     :on-success="(response, file, fileList) =>handleAvatarSuccess(response, file, fileList, 'listImgUrl')"
                     :before-upload="beforeAvatarUpload">
            <img v-if="shopModel.sellDrugDto.logoUrl"
                 :src="shopModel.sellDrugDto.logoUrl"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品规格："
                      prop="sellDrugDto.standard">
          <el-input v-model="shopModel.sellDrugDto.standard"
                    placeholder="请输入商品规格"
                    class="w-200"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品包装："
                      prop="sellDrugDto.drugPackage">
          <el-input v-model="shopModel.sellDrugDto.drugPackage"
                    placeholder="请输入商品包装"
                    class="w-200"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="药品品类："
                      prop="sellDrugTypeId">
          <el-select v-model="shopModel.sellDrugDto.sellDrugTypeId"
                     placeholder="请选择药品品类"
                     filterable>
            <el-option v-for="item in drugList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="副作用：">
          <el-input v-model="shopModel.sellDrugDto.sideEffect"
                    type="textarea"
                    placeholder="请输入副作用"
                    class="w-textarea"></el-input>
        </el-form-item>
        <el-form-item label="用法用量："
                      prop="sellDrugDto.dosage">
          <el-input v-model="shopModel.sellDrugDto.dosage"
                    type="textarea"
                    placeholder="请输入用法用量"
                    class="w-textarea"></el-input>
        </el-form-item>
        <el-form-item label="特点："
                      prop="sellDrugDto.feature">
          <el-input v-model="shopModel.sellDrugDto.feature"
                    type="textarea"
                    placeholder="请输入特点"
                    class="w-textarea"></el-input>
        </el-form-item>



        <el-form-item label="功能主治："
                      prop="sellDrugDto.functionalIndications">
          <el-input v-model="shopModel.sellDrugDto.functionalIndications"
                    type="textarea"
                    placeholder="请输入功能主治"
                    class="w-textarea"></el-input>
        </el-form-item>
        <el-form-item label="禁忌："
                      prop="sellDrugDto.taboo">
          <el-input v-model="shopModel.sellDrugDto.taboo"
                    type="textarea"
                    placeholder="请输入禁忌"
                    class="w-textarea"></el-input>
        </el-form-item>
        <el-form-item label="不良反应："
                      prop="sellDrugDto.adverseReaction">
          <el-input v-model="shopModel.sellDrugDto.adverseReaction"
                    type="textarea"
                    placeholder="请输入不良反应"
                    class="w-textarea"></el-input>
        </el-form-item>
        <el-form-item label="关联主题："
                      prop="themeIds">
          <el-select v-model="shopModel.themeIds"
                     multiple
                     filterable
                     remote
                     reserve-keyword
                     placeholder="请输入关联主题"
                     :remote-method="searchMethod"
                     :loading="loading1"
                     @change="handleSelectTheme"
                     class="w-200">
            <el-option v-for="item in themeFilterList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="销售话术："
                      prop="sellDrugDto.salesScript">
          <el-input v-model="shopModel.sellDrugDto.salesScript"
                    placeholder="请输入销售话术"
                    class="w-200"></el-input>
        </el-form-item>

        <!-- 药品要典 -->
        <el-form-item label="药品要典：">
          <el-button type="primary"
                     @click="handleAdd('goods')">新 增</el-button>
          <p align="center"
             style="width:100%"
             v-if="shopModel.sellDrugDto.sellDrugKnowledgeDtos.length === 0">
            <el-empty :image-size="100"></el-empty>
          </p>
          <el-card class="mt-20 knowledge-box"
                   v-else>
            <el-timeline>
              <el-timeline-item class="div-list"
                                v-for="(item, index) in shopModel.sellDrugDto.sellDrugKnowledgeDtos"
                                :key="index">
                <div class="knowledge-main">
                  <span v-html="commonFunction.highLight1(item.knowledge, item.keyWordList)">{{item.knowledge}}</span>
                  <el-button type="primary"
                             @click="editRow(shopModel.sellDrugDto.sellDrugKnowledgeDtos, index, 'goods')">编 辑</el-button>
                  <el-button type="danger"
                             @click="removeRow(shopModel.sellDrugDto.sellDrugKnowledgeDtos, index, 'goods')">删 除</el-button>
                </div>
                <ul v-if="item.knowledgeImage"
                    class="knowledgeImage-list">
                  <li v-for="(list, i) in item.knowledgeImage"
                      :key="i">
                    <el-image style="width: 120px; height: 120px"
                              :src="list"
                              :preview-src-list="item.knowledgeImage">
                    </el-image>
                    <i class="del el-icon-error"
                       @click="removeRow(item.knowledgeImage, i)"></i>

                  </li>
                </ul>
              </el-timeline-item>
            </el-timeline>
          </el-card>

          <goods-dialog :goodsDataObj="goodsDataObj"
                        @childGoodsData="childGoodsData"
                        :isShowDetail="isShowDetail"
                        :visible.sync="isShowGoods"
                        v-if="isShowGoods"></goods-dialog>
        </el-form-item>
        <el-form-item label="要典附件：">
          <el-upload class="avatar-uploader"
                     :action="imageUploadUrl"
                     :show-file-list="false"
                     accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg, .pdf, .mp4"
                     :on-success="(response, file, fileList) =>handleAvatarSuccess(response, file, fileList, 'keyPoints')"
                     :before-upload="beforeAvatarUpload">
            <img v-if="keyPoints"
                 :src="keyPoints"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-card class="mt-20"
                   v-if="shopModel.sellDrugDto.sellDrugAnnexDtos && shopModel.sellDrugDto.sellDrugAnnexDtos.length > 0">
            <div slot="header">附件列表</div>

            <ul class="list-card">
              <li v-for="(item, index) in shopModel.sellDrugDto.sellDrugAnnexDtos"
                  :key="index">
                <el-tooltip class="item"
                            effect="dark"
                            :content="item.name"
                            placement="top-start">
                  <p>
                    <el-input v-model="item.name"
                              placeholder="请输入附件名称"
                              @change="val=> chagneFileName(val, index, item.type, shopModel.sellDrugDto.sellDrugAnnexDtos)"></el-input>
                    <i class="del el-icon-error"
                       @click="delRow(shopModel.sellDrugDto.sellDrugAnnexDtos, index)"></i>
                  </p>
                </el-tooltip>
                <div class="file-box">
                  <el-image v-if="item.type === 'jpg' || item.type === 'png' || item.type === 'jpeg'"
                            style="height: 100px; "
                            :src="item.url"
                            :preview-src-list="[item.url]"
                            class="file-content">
                  </el-image>
                  <video v-if="item.type === 'mp4'"
                         :src="item.url"
                         controls="controls"
                         height="100"
                         class="file-content"></video>
                  <div v-if="item.type === 'pdf'">
                    <a :href="item.url"
                       target="_blank">
                      <img src="/static/images/pdf.jpg"
                           alt=""
                           class="file-content"></a>
                  </div>
                </div>
              </li>
            </ul>
          </el-card>
        </el-form-item>
        <template v-if="shopModel.advertisingRequestDto">
          <el-form-item label="广告标题："
                        prop="title">
            <el-input v-model="shopModel.advertisingRequestDto.title"
                      placeholder="请输入广告标题"
                      class="w-200"
                      maxlength="20"
                      clearable
                      show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="广告语："
                        prop="advertising">
            <template v-if="shopModel.advertisingRequestDto">
              <el-input v-model="shopModel.advertisingRequestDto.advertising"
                        placeholder="请输入广告语"
                        class="w-200"
                        maxlength="20"
                        clearable
                        show-word-limit></el-input>
            </template>
          </el-form-item>
          <el-form-item label="广告图片："
                        prop="adImg">
            <el-upload :action="imageUploadUrl"
                       :limit="1"
                       :on-preview="handlePictureCardPreview"
                       accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                       :on-change="handleChange"
                       :on-progress="onProgress"
                       :on-success="imgSuccess"
                       list-type="picture-card"
                       :on-remove="handleRemove"
                       :class="{disabled:uploadDisabled}"
                       :file-list="fileList">
            </el-upload>
            <el-dialog :append-to-body="true"
                       :visible.sync="imgVisible"
                       width="30%">
              <img width="100%"
                   :src="shopModel.advertisingRequestDto.logoUrl" />
            </el-dialog>
          </el-form-item>
        </template>
      </el-form>
      <p align="center">
        <el-button type="info"
                   @click="modalClose">返 回</el-button>
        <el-button type="primary"
                   @click="submitForm">保 存</el-button>
      </p>
    </el-dialog>

  </div>
</template>
<script>
  import goodsDialog from './goodsDialog' // 活动商品卖点
  export default {
    name: 'addShopDialog',
    props: {
      shopListData: {
        type: Object,
        default: {}
      },
      dataObj: {
        type: Object,
        default: {}
      },
      visible: {
        type: Boolean,
        default: false
      },
      getDetail: {
        type: Function,
        default: null
      },
    },
    data () {
      return {
        title: '新 增',
        loading: false,
        loading1: false,
        loading2: false,
        dialogVisible: false,
        imageUploadUrl: this.api.appUpgradeUpload.url,
        shopModel: {
          factoryId: '',
          sellDrugDto: {
            drugType: '', // 药品类型
            drugId: null, // 药品id
            drugName: '',
            logoUrl: '', // 图片地址
            salesScript: '', // 销售话术
            functionalIndications: '', // 功能主治
            taboo: '', // 禁忌症
            adverseReaction: '', // 不良反应
            standard: '', // 规格
            drugPackage: '', // 包装
            sellDrugKnowledgeDtos: [], // 产药品要典
            sellDrugAnnexDtos: [], // 要典附件
            sideEffect:'',//副作用
            dosage:'',//用法
            feature:'',//特点
          },
          themeIds: [], // 关联主题
          advertisingRequestDto: {
            id: null,
            title: '', // 广告标题
            advertising: '', // 广告语
            logoUrl: '', // 广告图片
          },
        },
        keyPoints: '',
        shopTypeList: [
          { drugType: 2, drugName: "化学药" },
          { drugType: 3, drugName: "中成药" },
          { drugType: 4, drugName: "保健品" },
          { drugType: 5, drugName: "器械" }
        ],
        shopRules: {
          'sellDrugDto.drugType': [{ required: true, message: '请选择商品分类', trigger: 'blur' }],
          'sellDrugDto.drugId': [{ required: true, message: '请选择商品名称', trigger: ['change', 'blur'] }],
          'sellDrugDto.logoUrl': [{ required: true, message: '请选上传商品图片', trigger: ['change', 'blur'] }],
          'sellDrugDto.functionalIndications': [{ required: true, message: '请输入功能主治', trigger: 'blur' }],
          'sellDrugDto.taboo': [{ required: true, message: '请输入禁忌', trigger: 'blur' }],
          'sellDrugDto.adverseReaction': [{ required: true, message: '请输入不良反应', trigger: 'blur' }],
          themeIds: [{ required: true, message: '请输入关联主题', trigger: ['change', 'blur'] }],
          'sellDrugDto.dosage': [{ required: true, message: '请输入用法用量', trigger: 'blur' }],
          'sellDrugDto.feature': [{ required: true, message: '请输入特点', trigger: 'blur' }],
        },
        drugList:[],//药品分类
        themeFilterList: [],
        themeList: [],
        pageIndex: 1,
        pageSize: 10,
        dataList: [],
        dataFilterList: [],
        goodsDataObj: {},
        goodsList: [], // 药品要点
        isShowDetail: false,
        isShowGoods: false, // 是否显示药品要点
        // 上传相关参数
        uploadDisabled: false,
        // 是否显示预览图片
        imgVisible: false,
        fileList: [],
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性
      },



      // 商品图片、广告图片
      handleAvatarSuccess (res, file, fileList, op) {
        if (res.code === '200') {
          if (op === 'listImgUrl') {
            this.shopModel.sellDrugDto.logoUrl = res.object[0];
          }
          if (op === 'adImg') {
            this.shopModel.advertisingRequestDto.logoUrl = res.object[0];
          }
          if (op === 'keyPoints') {
            this.$message.success('上传成功!');
            this.keyPoints = res.object[0];
            if (!this.shopModel.sellDrugDto.sellDrugAnnexDtos) {
              this.$set(this.shopModel.sellDrugDto, 'sellDrugAnnexDtos', []);
            }
            if (this.shopModel.sellDrugDto.sellDrugAnnexDtos) {
              this.shopModel.sellDrugDto.sellDrugAnnexDtos.push({
                fileName: file.name,
                url: res.object[0],
                name: file.name.split('.')[0],
                type: file.name.split('.')[file.name.split('.').length - 1] // 防止本身图片就是带 . 的名字
              });
              setTimeout(() => { this.keyPoints = ''; }, 500);
            }

          }
        }
      },
      beforeAvatarUpload (file) {
        let types = ['image/jpeg', 'image/jpg', 'image/gif', 'image/png', 'image/bmp', 'video/mp4', 'application/pdf']
        const isJPG = types.includes(file.type)
        if (!isJPG) {
          this.$message.error('上传附件必须是JPG/JPEG/GIF/PNG/BMP/PDF/mp4 格式!');
        }
        return isJPG;
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      // 选择商品分类
      changeType (val) {
        this.shopModel.sellDrugDto.drugType = val;
      },
      // 搜索关联主题
      searchMethod (query) {
        if (query !== '') {
          let _this = this;
          _this.loading1 = true; // 锁住
          this.post(this.api.promote.getThemeList, {
            pageIndex: this.pageIndex - 1,
            pageSize: this.pageSize,
            search: query
          }).then(res => {
            if (res.data.code === '200') {
              _this.loading1 = false;
              _this.themeList = res.data.object;
            }
          })

          /**
           * 搜索内容渲染到下拉框
           * 从 this.topicList 把数据赋值到 this.options
           * 只有这样才能起作用
           */
          setTimeout(() => {
            _this.loading1 = false;
            _this.themeFilterList = _this.themeList.filter(item => item.name.indexOf(query) > -1);

          }, 200);
        } else {
          this.themeFilterList = [];
        }
      },
      // 选中关联主题
      handleSelectTheme (item) {
        this.shopModel.themeIds = item;
        this.shopModel.sellDrugDto.themes = this.themeList.filter(el => item.includes(el.id));
        // this.shopModel.sellDrugDto.themes = this.themeList.filter(list => item.some(ele => ele === list.id));
      },
      // 搜索商品名称
      remoteMethod (query) {
        if (query !== '') {
          let _this = this;
          _this.loading2 = true;
          this.post(this.api.promote.getRecommendDrug, {
            name: query,
            typeList: [this.shopModel.sellDrugDto.drugType]
          }).then(res => {
            if (res.data.code === '200') {
              _this.loading2 = false;
              _this.dataList = res.data.object;
            }
          })
          setTimeout(() => {
            _this.loading2 = false;
            _this.dataFilterList = _this.dataList.filter(item => item.name.indexOf(query) > -1);
          }, 200)
        } else {
          this.dataFilterList = [];
        }
      },

      handleSelect (item) {
        let obj = this.dataFilterList.find(list => list.id == item);
        this.shopModel.sellDrugDto.drugId = obj.id;
        this.shopModel.sellDrugDto.drugName = obj.name;
        this.shopModel.sellDrugDto.standard = obj.standard;
        this.shopModel.sellDrugDto.drugPackage = obj.drugPackage;
      },
      // 删除附件
      delRow (table, index) {
        table.splice(index, 1)
      },
      submitForm () {
        this.shopModel.sellDrugDto.themeKnowledgeRequestDtoList = this.goodsList;
        this.shopModel.sellDrugDto.themeKnowledgeRequestDtoList.forEach(item => {
          if (item.knowledgeImageUrls) {
            item.knowledgeImageUrls = JSON.stringify(item.knowledgeImage);
          }
        })
        this.$refs.shopRefs.validate(async (valid) => {
          if (valid) {
            if (this.dataObj && this.shopListData) {
              let { title, advertising, logoUrl } = this.shopModel.advertisingRequestDto;
              if ((title === '' && advertising === '' && logoUrl === '') ||
                (title !== '' && advertising !== '' && logoUrl !== '')) {
                if (title === '' && advertising === '' && logoUrl === '') {
                  this.shopModel.advertisingRequestDto = null;
                }
                const { data: res } = await this.post(this.api.promote.updateShop, this.shopModel);
                if (res.code === '200') {
                  this.$message.success('保存成功!');
                  this.getDetail();
                  this.modalClose();
                }
              } else {
                this.$message.error('广告全部必填或者全部不填!');
              }
            } else if (this.dataObj) {
              let { title, advertising, logoUrl } = this.shopModel.advertisingRequestDto;
              if ((title === '' && advertising === '' && logoUrl === '') ||
                (title !== '' && advertising !== '' && logoUrl !== '')) {
                if (title === '' && advertising === '' && logoUrl === '') {
                  this.shopModel.advertisingRequestDto = null;
                }
                const { data: res } = await this.post(this.api.promote.saveShop, this.shopModel);
                if (res.code === '200') {
                  this.$message.success('保存成功!');
                  this.getDetail();
                  this.modalClose();
                }
              } else {
                this.$message.error('广告全部必填或者全部不填!');
              }

            } else {
              this.$emit('shopData', this.shopModel);
              this.modalClose();
            }

          }
        })
      },
      handleAdd (option) {
        switch (option) {
          case 'goods':
            this.isShowGoods = true;
            this.isShowDetail = false;
            break;
        }
      },
      chagneFileName (val, index, type, data) {
        data[index].fileName = val + '.' + type;
      },
      // 药品要点
      childGoodsData (data) {
        if (data.isEdit) {
          this.shopModel.sellDrugDto.sellDrugKnowledgeDtos[[data.key]] = data;
        } else {
          this.shopModel.sellDrugDto.sellDrugKnowledgeDtos.push(data);
        }
        this.shopModel.sellDrugDto.sellDrugKnowledgeDtos.forEach(item => {
          item.keyWord = item.keyWordList.join(',');
        })
      },
      // 删除药品要点
      removeRow (data, index, option) {
        if (option == 'goods') {
          this.$confirm('是否删除该药品要点？')
            .then(_ => {
              data.splice(index, 1);
            })
            .catch(_ => { });
        } else {
          data.splice(index, 1);
        }
      },
      // 编辑药品要点
      editRow (data, index, option) {
        if (option === 'goods') {
          this.isShowGoods = true;
          this.isShowDetail = true;
          this.goodsDataObj = Object.assign({}, { ...data[index], isEdit: true, key: index, });
        }
      },
      onProgress (event, file, fileList) {
        this.uploadDisabled = false;
      },
      // 图片上传成功
      imgSuccess (response, file, fileList) {
        this.uploadDisabled = true;
        this.shopModel.advertisingRequestDto.logoUrl = response.object[0];
      },
      // 图片上传失败
      imgError (err, file, fileList) {
        this.uploadDisabled = true;
      },
      // 预览图片
      handlePictureCardPreview (file) {
        this.imgVisible = true;
        this.uploadDisabled = true;
      },
      // 删除图片
      handleRemove (file, fileList) {
        this.uploadDisabled = false;
        this.shopModel.advertisingRequestDto.logoUrl = '';
      },
      // 图片更改
      handleChange (fileList) {
        this.uploadDisabled = true;
      },
      //查询药品分类
      getDellDrugList() {
        this.post(this.api.slowDisease.getDellDrugList).then((res) => {
          if (res.data.code === '200') {
           this.drugList = res.data.object
          }
        })
      },
    },
    created () {
      this.getDellDrugList()
      if (this.dataObj) {
        this.shopModel.factoryId = this.dataObj.id;
      }
      if (this.shopListData) {
        this.title = '编 辑';
        this.shopModel.sellDrugDto = this.shopListData.sellDrugDto;
        if (this.shopListData.sellDrugDto.sellDrugKnowledgeDtos.length > 0) {
          this.shopListData.sellDrugDto.sellDrugKnowledgeDtos.forEach(item => {
            item['keyWordList'] = item.keyWord.split(',');
            if (item.knowledgeImageUrls) {
              this.$set(item, 'knowledgeImage', JSON.parse(item.knowledgeImageUrls));
            }
          })
        }
        // 回显商品名称
        this.shopModel.drugId = this.shopListData.sellDrugDto.drugId;
        let { drugId, drugName } = this.shopListData.sellDrugDto;
        this.dataFilterList = [{
          id: drugId,
          name: drugName
        }]


        // 回显关联主题
        this.shopModel.themeIds = this.shopListData.themes.map(item => item.id);
        this.themeFilterList = this.shopListData.sellDrugDto.themes;

        if (this.shopListData.advertisingRequestDto) {
          this.shopModel.advertisingRequestDto = this.shopListData.advertisingRequestDto;
          let urlStr = this.shopModel.advertisingRequestDto.logoUrl.split(","); //logo地址
          urlStr.forEach(item => {
            let obj = {};
            obj.url = item;
            this.fileList.push(obj);
          });
          this.uploadDisabled = true;
        }
      }
    },
    components: {
      'goods-dialog': goodsDialog
    },

  }
</script>
<style scoped lang="scss">
  .w-textarea {
    width: 80%;
  }
  .disabled {
    /deep/ .el-upload--picture-card {
      display: none;
    }
  }

  .el-upload--picture-card {
    width: 150px; // 宽高可变
    height: 150px;
  }

  /deep/ .el-upload-list--picture-card {
    .el-upload-list__item {
      width: 150px; // 宽高与背景图一致
      height: 150px;
      position: inherit;
      .el-upload-list__item-actions {
        width: 150px; // 宽高与背景图一致
        height: 150px;
      }
    }
  }

  .avatar-uploader {
    /deep/ .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .del {
        position: absolute;
        z-index: 99;
        top: 0;
        right: 0;
        font-size: 26px;
        color: #f00;
      }
      .avatar {
        width: 98px !important;
        height: 98px !important;
        display: block;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 98px !important;
        height: 98px !important;
        line-height: 98px !important;
        text-align: center;
      }
      &.el-upload--picture-card {
        width: 98px !important;
        height: 98px !important;
        line-height: 98px !important;
      }
      &:hover {
        border-color: #409eff;
      }
    }
    /deep/ .el-upload-list--picture-card {
      .el-upload-list__item {
        width: 98px;
        height: 98px;
      }
    }
  }
  .knowledge-box {
    width: 100%;
    .el-timeline-item {
      padding-bottom: 0;
      span {
        padding-right: 10px;
        padding-bottom: 10px;
        border-right: 1px solid #ebeef5;
        width: calc(100% - 150px);
      }
    }
    /deep/ .el-timeline-item__wrapper {
      top: -10px;
      padding-left: 20px;
      .knowledge-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ebeef5;
      }
      .el-timeline-item__timestamp.is-bottom {
        margin-top: 0;
      }
      .knowledgeImage-list {
        display: flex;
        flex-wrap: wrap;
        li {
          position: relative;
          .del {
            position: absolute;
            z-index: 1;
            right: 0;
            top: 0;
            font-size: 18px;
            color: #f00;
            cursor: pointer;
            display: inline-block;
          }
        }
      }
      .el-image {
        overflow: unset;
        border: 1px dashed #999;
        margin-right: 10px;
        text-align: center;
        margin-top: 10px;
        img {
          height: 100px;
          width: 100px;
          margin-top: 10px;
        }
      }
      .remove {
        font-size: 20px;
        color: #f00;
        cursor: pointer;
      }
    }
  }
  .list-card {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 19%;
      height: 170px;
      margin-right: 1%;
      margin-bottom: 10px;
      border: 1px dashed #999;
      // text-align: center;
      p {
        position: relative;
        padding: 10px 8px;
        line-height: 24px;
        height: 50px;
        border-bottom: 1px dashed #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .del {
          position: absolute;
          right: -5px;
          top: -10px;
          z-index: 1;
          display: inline-block;
          cursor: pointer;
          color: #f00;
          font-size: 18px;
        }
        span {
          width: 80%;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .file-box {
        text-align: center;
        .file-content {
          margin: 8px auto 0;
          height: 100px;
        }
      }
    }
  }
</style>
